<template>
  <div class="echarts-demo">
    <!-- <img alt="Vue logo" src="../assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/> -->
    <section class="container">
      <!-- 左容器 -->
      <section class="leftItem">
        <ItemPage>
          <ItemOne></ItemOne>
        </ItemPage>
        <ItemPage>
          <ItemTwo></ItemTwo>
        </ItemPage>
      </section>
      <!-- 中容器 -->
    <section class="middleItem">
      <MapPage></MapPage>
    </section>
      <!-- 右容器 -->
      <section class="rightItem">
        <ItemPage>
          <ItemThree></ItemThree>
        </ItemPage>
        <ItemPage>
          <ItemFour></ItemFour>
        </ItemPage>
      </section>
    </section>
  </div>
</template>

<script lang="ts">
// import { Options, Vue } from 'vue-class-component'
// import { inject } from 'vue'
// import HelloWorld from '@/components/HelloWorld.vue'
import ItemPage from '@/components/itemPage.vue'
import ItemOne from '@/components/itemOne.vue'
import ItemTwo from '@/components/itemTwo.vue'
import ItemThree from '@/components/itemThree.vue'
import ItemFour from '@/components/itemFour.vue'
import MapPage from '@/components/mapPage.vue'
import { ref, inject } from 'vue'
// @Options({
//   components: {
//     HelloWorld,
//     ItemPage,
//     ItemOne,
//     ItemTwo,
//     ItemThree,
//     ItemFour
//   }
// })

// export default class Home extends Vue {
//   count = 0

//   // Methods will be component methods
//   increment () {
//     this.count += 10
//   }

//   decrement () {
//     this.count--
//   }
// }
export default {
  name: 'echartsDemo',
  components: {
    ItemPage,
    ItemOne,
    ItemTwo,
    ItemThree,
    ItemFour,
    MapPage
  },
  setup () {
    // 把接收的值传递给变量 $echarts
    const $echarts:any = inject('echarts')
    console.log($echarts)
    var $http = inject('axios')
    console.log($http)
    const count = ref(10)

    return {
      count
    }
  }
}
</script>
<style lang="scss" scoped>
  /* 大容器的样式 */
  .container {
    /* 固定值，不需要改变，不设置rem单位 */
    min-width: 1080px;
    max-width: 1900px;
    margin: 0 auto;
    padding: .625rem .625rem 0;
    // background: gray;
    display: flex;
    /* 设置左右在页面的份数 */
    .leftItem, .rightItem {
      flex: 3;
    }
  }
  .middleItem {
    // height: 600px;
    // border: .0313rem solid blue;
    flex: 5;
    margin: .25rem;
    background: gray;
  }
</style>
